<template>
  <div class="gedan">
    <div class="title">
      <span>搜索"{{ keywords }}",</span>
      <span
        >共<span :style="{ color: 'rgb(255, 165, 0)' }">{{ count }}</span
        >个歌单</span
      >
    </div>
    <div class="result">
      <div
        class="item"
        v-for="(item, index) in gedanList"
        :key="index"
        @click="playGD(item)"
      >
        <div
          class="img"
          @mouseover="playShow = index"
          @mouseleave="playShow = false"
        >
          <img v-lazy="item.coverImgUrl" alt="" />
        </div>
        <div class="name">
          <span>{{ item.name }}</span>
        </div>
        <transition name="fade">
          <div class="playCount" v-show="playShow === index">
            <i class="playIcno"></i>
            <span>{{ item.playCount }}</span>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playShow: false,
      keywords: null,
      //   总数
      count: null,
      // 歌单列表
      gedanList: [],
    };
  },
  methods: {
    // 进入歌单详情
    playGD(item) {
      this.$router.replace({
        name: "gdDetail",
        query: {
          id: item.id,
        },
      });
    },
  },
  created() {
    this.keywords = this.$route.query.keywords;
    this.$axios({
      url: "/cloudsearch",
      params: {
        keywords: this.keywords,
        type: 1000,
      },
    }).then((res) => {
      this.count = res.data.result.playlistCount;
      this.gedanList = res.data.result.playlists;
    });
  },
};
</script>

<style scoped>
@import url("../../css/result/gedan");
</style>